<template>
	<!-- title部分 -->
	<view class="titlebox">
		<image class="titlebox-backimg" src="../../static/上一步.png" @click="gotoIndex"></image>
		<view class="titlebox-titletext">签到有礼</view>
	</view>

	<!-- sign部分 -->
	<view class="sign">
		<view class="sign-textbox">
			<view class="sign-textbox-text">
				<text class="sign-textbox-text-1">已连续签到</text>
				<text class="sign-textbox-text-2">12</text>
				<text class="sign-textbox-text-1">天</text>
			</view>
			<view class="sign-textbox-text1">当前拥有123积分</view>
		</view>
		<view class="signbox">
			<view class="signdaybox">
				<view class="signdaybox-text">未签</view>
				<view class="signdaybox-text2">2.6</view>
			</view>

			<view class="signdaybox">
				<view class="signdaybox-text">未签</view>
				<view class="signdaybox-text2">2.6</view>
			</view>

			<view class="signdaybox">
				<view class="signdaybox-text">未签</view>
				<view class="signdaybox-text2">2.6</view>
			</view>

			<view class="signdaybox">
				<view class="signdaybox-text">未签</view>
				<view class="signdaybox-text2">2.6</view>
			</view>

			<view class="signdaybox1">
				<image class="signdaybox-img" src="../../static/今日签到.png"></image>
				<view class="signdaybox-text1">今日</view>
			</view>

			<view class="signdaybox2">
				<image class="signdaybox-img" src="../../static/签到.png"></image>
				<view class="signdaybox-text2">2.6</view>
			</view>

			<view class="signdaybox2">
				<image class="signdaybox-img" src="../../static/签到.png"></image>
				<view class="signdaybox-text2">2.6</view>
			</view>
		</view>

		<button class="signbutton">签到领积分</button>

		<view class="sign-text">积分兑换</view>
	</view>

	<!-- task部分 -->
	<view class="taskbox">
		<view class="taskbox-text">新人任务</view>
		<view class="task-box">
			<view class="task">
				<view class="taskimgbox">
					<image class="taskimgbox-img" src="../../static/邀请好友.png"></image>
				</view>

				<view class="textbox">
					<view class="statement">邀请好友 （0/5）</view>
					<view class="reward">获得187积分</view>
				</view>

				<view class="execute">去邀请</view>
			</view>



			<view class="task">
				<view class="taskimgbox">
					<image class="taskimgbox-img" src="../../static/分享商品.png"></image>
				</view>

				<view class="textbox">
					<view class="statement">分享商品 （0/5）</view>
					<view class="reward">获得187积分</view>
				</view>

				<view class="execute">领取</view>
			</view>

			<view class="task">
				<view class="taskimgbox">
					<image class="taskimgbox-img" src="../../static/邀请好友.png"></image>
				</view>

				<view class="textbox">
					<view class="statement">商品加入购物车 （10/10）</view>
					<view class="reward">获得187积分</view>
				</view>

				<view class="execute">已领取</view>
			</view>

			<view class="task">
				<view class="taskimgbox">
					<image class="taskimgbox-img" src="../../static/云发单.png"></image>
				</view>

				<view class="textbox">
					<view class="statement">完成云发单 （0/1）</view>
					<view class="reward">获得187积分</view>
				</view>

				<view class="execute">去邀请</view>
			</view>

			<view class="task">
				<view class="taskimgbox">
					<image class="taskimgbox-img" src="../../static/转化.png"></image>
				</view>

				<view class="textbox">
					<view class="statement">使用一次转链神器 （0/1）</view>
					<view class="reward">获得187积分</view>
				</view>

				<view class="execute">领取</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			gotoIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 我的路径
				});
			},
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
	}

	.titlebox {
		padding: 2%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
		/* 添加这一行来水平居中 */
	}

	/* title部分样式 */
	.titlebox-backimg {
		width: 15px;
		height: 15px;
	}

	.titlebox-titletext {
		margin-left: auto;
		margin-right: auto;
		font-size: 15px;
		font-weight: 600;
	}

	/* sign部分 */
	.sign {
		width: 91%;
		margin: 0 auto 10px;
		padding: 2%;
		border-bottom: 10px;
		border-radius: 10px;
		background: white;
	}

	.sign-textbox {
		display: flex;
		align-items: center;
		padding: 2%;
		justify-content: space-between;
	}

	.sign-textbox-text {
		font-size: 15px;

	}

	.sign-textbox-text-1 {
		font-weight: 700;
		font-size: 15px;
	}

	.sign-textbox-text-2 {
		color: rgb(222, 132, 62);
		font-weight: 700;
		font-size: 15px;
	}

	.sign-textbox-text1 {
		font-size: 12px;
		font-weight: 700;
	}

	.signbox {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2.5%;
		margin-bottom: 20px;
	}

	.signdaybox {
		width: 8%;
		background: rgb(246, 241, 235);
		padding: 2%;
		border-radius: 5px;
		height: 40px;
	}

	.signdaybox-text {
		font-size: 9px;
		color: white;
		background: linear-gradient(to bottom right, rgb(213, 109, 47), rgb(218, 135, 63));
		text-align: center;
		border-radius: 2px;
		width: 80%;
		margin: 0 auto 10px;
		padding: 10%;
	}

	.signdaybox-text2 {
		font-size: 9px;
		text-align: center;
		color: rgb(120, 120, 120);
	}

	.signbutton {
		width: 90%;
		display: flex;
		align-items: center;
		background-color: rgb(222, 132, 62);
		justify-content: center;
		font-size: 15px;
		border-radius: 17px;
		color: white;
		margin-bottom: 10px;
	}

	.sign-text {
		width: 90%;
		display: flex;
		align-items: center;
		justify-content: center;
		/* background-color: yellow; */
		margin: 0 auto;
		font-size: 12px;
	}

	.signdaybox1 {
		width: 8%;
		background: rgb(246, 241, 235);
		padding: 2%;
		border-radius: 5px;
		height: 40px;
		position: relative;
		border: 1px solid rgb(218, 135, 63);
	}

	.signdaybox2 {
		width: 8%;
		background: rgb(246, 241, 235);
		padding: 2%;
		border-radius: 5px;
		height: 40px;
	}

	.signdaybox-img {
		display: block;
		margin: 0 auto 10px;
		width: 100%;
		height: 17px;
	}

	.signdaybox-text1 {
		font-size: 10px;
		text-align: center;
		position: absolute;
		left: 0px;
		bottom: 0px;
		background: linear-gradient(to bottom right, rgb(213, 109, 47), rgb(218, 135, 63));
		width: 100%;
		height: 17px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		border-radius: 0 0 5px 5px;
	}

	/* task部分 */
	.taskbox {
		width: 91%;
		background: white;
		border-radius: 5px;
		padding: 2%;
		margin: 0 auto;
		padding-bottom: 10%;
	}

	.taskbox-text {
		padding: 2%;
		font-size: 14px;
		font-weight: 600;
	}

	.task-box {
		/* padding: 2%; */
	}

	.task {
		display: flex;
		align-items: center;
		/* margin-bottom: 10px; */
		padding: 4% 2%;
		border-bottom: 1px solid #eee;
	}

	.taskimgbox {
		border-radius: 50px;
		background: wheat;
		padding: 1%;
		margin-right: 10px;
	}

	.taskimgbox-img {
		width: 20px;
		height: 20px;
		display: block;
		margin: 0 auto;
	}

	.textbox {
		flex: 1;
	}

	.statement {
		font-size: 15px;
	}

	.reward {
		font-size: 12px;
		color: rgb(120, 120, 120);
	}

	.execute {
		color: rgb(213, 109, 47);
		padding: 2%;
		border-radius: 25px;
		border: 1px solid;
		font-size: 13px;
	}
</style>
